<template>
  <div class="reviseinfo">
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        v-model="code"
        name="code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" color="#ff6a6c" native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import API from "@/utils/api.js";
import { Form, Field, Button, Uploader, Toast } from "vant";
export default {
  name: "ReviseInfo",
  data() {
    return {
      //新手机号
      mobile: "",
      //新密码
      password: "",
      //验证码
      code: "",
    };
  },
  created() {
    this.$get(API.GET_AUTO_INFO, {
      token: this.$store.state.token,
    }).then((res) => {
      console.log(res);
      this.userInfo = res.data;
    });
  },
  methods: {
    onSubmit(values) {
      this.$post(API.POST_AUTO_RESET, {
        token: this.$store.state.token,
        password: values.password,
        mobile: values.mobile,
        code: this.code,
      }).then((res) => {
        this.$router.push("/my");
        Toast.success("信息修改成功");
      });
    },
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Toast.name]: Toast,
  },
};
</script>

<style lang="less" scoped>
.reviseinfo {
  margin-top: 46px;
  .avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 20px;
    margin-left: 140px;
  }
}
</style>